<template>
    <div class="changePassword">
        <van-nav-bar title="修改密码" left-arrow @click-left="goback" :fixed="true" />
        <div class="vannavbar"></div>
        <div class="changePassword_main">
            <div class="changePassword_from">
                <van-form>
                    <div class="text">
                      <img src="@/assets/img/my/zhanghao-icon.png" alt="" /> 密码
                    </div>
                    <van-field
                      type="password"
                      input-align="left"
                      placeholder="请输入您的密码"
                      v-model="Password"
                      @blur="checkPasswordInput"
                    />
                    <br />
                    <div class="text">
                      <img src="@/assets/img/my/mima-icon.png" alt="" /> 密码
                    </div>
                    <van-field
                      type="password"
                      input-align="left"
                      placeholder="请再次输入您的密码"
                      v-model="PasswordAgain"
                      @blur="checkPasswordAgainInput"
                    />
                </van-form>
                <div class="tip">
                    <img src="@/assets/img/login/dot.png" alt="">
                    请重复输入两次相同的密码
                </div>
            </div>
            <div class="changePassword_submit">
                <van-button block type="primary" class="btn1" @click="onSubmit"> 确认修改 </van-button>
                
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import { Toast, Notify } from 'vant';
import { Dialog } from 'vant';
import { useStore } from "vuex"; // ⚪️ 引入状态管理
import {  isCardID } from "@/utils/validate";
import router from "@/router";
import { userLoginResetPassword} from "@/network/StoryBoard.js";
import CryptoJS from 'crypto-js'

export default {
    setup() {
        const store = useStore(); // 获取对象
        const state = reactive({
            Password:'',
            PasswordAgain:'',
        });
        onMounted(() => {
            // getUser();
        });

        /****************************************************/ 
        // 返回我的页面
        const goback = () => {
            router.push({ path: "/my" });
        };
        const changePassword = () => {
            let Password=CryptoJS.MD5(state.PasswordAgain).toString();
            let params={
                AccountName: store.state.user.name,
                Password: Password,
            }
            userLoginResetPassword(params).then((res)=>{
                if(res.success){
                    const toast = Toast.loading({
                        duration: 0,
                        forbidClick: true,
                        message: '修改成功，退出登录中...',
                    });
                    
                    setTimeout(() => {
                        // 调用action的登录方法
                        store.dispatch("FedLogOut", {}).then((res) => {
                            router.push({ path: "/Home" });
                            toast.clear()
                        }).catch(() => {
                            toast.clear()
                        });
                    }, 2000);

                }else{
                    Notify({
                        type: 'danger',
                        message: res.Message
                    });
                    toast.clear()
                }
            });
        };
        
        // 检查密码输入时是否包含中文
        const checkPasswordInput = (event) => {
        const value = event.target.value;
        const chineseRegex = /[\u4e00-\u9fa5]/; // 匹配中文字符
        if (chineseRegex.test(value)) {
            Notify({ type: 'warning', message: '密码中不能包含中文字符' });
        }
        };

        // 检查再次输入密码时是否包含中文
        const checkPasswordAgainInput = (event) => {
        const value = event.target.value;
        const chineseRegex = /[\u4e00-\u9fa5]/; // 匹配中文字符
        if (chineseRegex.test(value)) {
            Notify({ type: 'warning', message: '密码中不能包含中文字符' });
        }
        };

        // 比较两个密码是否相同
        const comparePasswords = () => {
        if (state.Password !== state.PasswordAgain) {
            alert('请输入相同的密码');
        }
        };

        // 提交按钮的点击事件
        const onSubmit = () => {
        if (state.Password === state.PasswordAgain) {
            if (state.Password=='' || state.PasswordAgain==''){
                Notify({ type: 'warning', message: '请先输入密码' });
            }else{
                // 执行提交逻辑
                changePassword()
            }
        } else {
            Notify({ type: 'warning', message: '两次密码不一致，请重新输入' });
        }
        };
        /****************************************************/ 
       
        const onBeforeClosePassword = (action, done) => {
            if (action === "confirm") {
                if (state.OldPassword == '') {
                    Notify({ type: 'warning', message: '请输入旧的登录密码' });
                    return false
                }
                if (state.NewPassword == '') {
                    Notify({ type: 'warning', message: '请输入新的登录密码' });
                    return false
                }
                UpdateUserPassword();
            } else {
                state.Password = '';
                state.PasswordAgain = '';
            }
        }

        //修改用户信息 登录密码
        const UpdateUserPassword = () => {
            // 调用action的登录方法
            var params = {
                MemberId: state.token.ID,
                OldPwd: state.OldPassword,
                NewPwd: state.NewPassword,
            }
            UpdateLoginPwd(params).then((res) => {
                if (res.Code == 0) {
                    state.dialogShow3 = false;
                    state.OldPassword = '';
                    state.NewPassword = '';
                    const toast = Toast.loading({
                        duration: 0,
                        forbidClick: true,
                        message: '修改成功，退出登录中...',
                    });
                    setTimeout(() => {
                        // 调用action的登录方法
                        store.dispatch("FedLogOut", {}).then((res) => {
                            router.push({ path: "/", });
                            toast.clear()
                        }).catch(() => {
                            toast.clear()
                        });
                    }, 2000);
                } else {
                    state.OldPassword = '';
                    state.NewPassword = '';
                    Notify({
                        type: 'danger',
                        message: res.Message
                    });
                    toast.clear()
                }
            });
        }


        // 退出登录
        const FedLogOut = () => {
            Dialog.confirm({
                title: '提示',
                message: '确定要退出登录吗？',
            }).then(() => {
                const toast = Toast.loading({
                    duration: 0,
                    forbidClick: true,
                    message: '退出登录中...',
                });
                // 调用action的登录方法
                store.dispatch("FedLogOut", {}).then((res) => {
                    router.push({ path: "/", });
                    toast.clear()
                }).catch(() => {
                    toast.clear()
                });
            }).catch(() => { });
        }
        //获取用户信息 更新余额
        const getUser = () => {
            store.dispatch("GetMemberInfo", { Id: store.state.user.token.ID }).then((res) => {
                state.token = res.Data
            }).catch(() => { });
        }
        return {
            ...toRefs(state),
            goback, 
            checkPasswordInput,
            checkPasswordAgainInput,
            comparePasswords,
            onSubmit,
            changePassword,

            FedLogOut,
            onBeforeClosePassword,

        };
    },
};
</script>

<style scoped></style>